<template>

<div>
    服务名称
    <el-input v-model="server.name"></el-input>
    服务内容
    <el-input v-model="server.content"></el-input>
    服务价格
    <el-input v-model="server.price"></el-input>
    服务类型
  <el-dropdown @command="handleCommand">
    
  <span class="el-dropdown-link">
    请选择服务类型<i class="el-icon-arrow-down el-icon--right"></i>
  </span>
  <el-dropdown-menu slot="dropdown">
    <el-dropdown-item command="1">维护检修</el-dropdown-item>
    <el-dropdown-item command="2">家政服务</el-dropdown-item>
    <el-dropdown-item command="3">生活缴费</el-dropdown-item>
    <el-dropdown-item command="4" >搬家出租</el-dropdown-item>
    <el-dropdown-item command="5" >美食商圈</el-dropdown-item>
     <el-dropdown-item command="6">其他服务</el-dropdown-item>
  </el-dropdown-menu>
</el-dropdown>
服务类型为：<el-tag type="success">{{serverName}}</el-tag>
<!-- 选择小区 -->
服务小区
  <el-dropdown @command="handleCommand1">   
  <span class="el-dropdown-link">
    请选择服务小区<i class="el-icon-arrow-down el-icon--right"></i>
  </span>
  <el-dropdown-menu slot="dropdown">
    <el-dropdown-item command="1">蜗牛小区1</el-dropdown-item>
    <el-dropdown-item command="2">蜗牛小区2</el-dropdown-item>
  </el-dropdown-menu>
</el-dropdown>
服务小区为：<el-tag type="success">{{cid}}</el-tag>

<!-- 上传图片 -->
<el-form>
 <el-form-item label="上传图片">
        <el-upload class="avatar-uploader"
                   action="http://192.168.11.18:8080/file/uploadImage"
                   :show-file-list="false"
                   :on-success="getUploadFileName">
          <img v-if="imageUrl"
               :src="imageUrl"
               class="avatar">
          <i v-else
             class="el-icon-upload avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
</el-form>


  <div id="action">
    <el-button type="danger" size="mini" @click="commit">确定</el-button>
      <el-button type="success" size="mini" @click="cancel">取消</el-button>   
    </div> 
  </div>
 
</template>

<script>

export default {
data(){
return{
    type:'',
    serverName:"",
    cid:"",
      imageUrl: '',

}
},
methods:{
   // 上传图片
  getUploadFileName (res) {
      this.imageUrl = res;
      this.server.image = res;
      console.log(res)
    },
    //选择小区
  handleCommand(command) {
  console.log(command);
        // this.$message('click on item ' + command);
        this.server.type=command
 if (command==1) {
   this.serverName="维护检修"
 }
 if (command==2) {
   this.serverName="家政服务"
 }
 if (command==3) {
   this.serverName="生活缴费"
 }
 if (command==4) {
   this.serverName="搬家出租"
 }
 if (command==5) {
   this.serverName="美食商圈"
 }
 if (command==6) {
   this.serverName="其他服务"
 }
      },
      // 选择小区方法
      handleCommand1(command) {
  
        // this.$message('click on item ' + command);
        this.server.cid=command
 if (command==1) {
   this.cid="蜗牛小区1"
 }
 if (command==2) {
   this.cid="蜗牛小区2"
 }
      },
      //取消按钮
     cancel(){
 this.$emit("add_dialog",{result:true,data:{}})
    },
    commit(){
      this.$emit("add_dialog",{result:true,data:this.server})
    } 
},

props:{
    server:{}//用来接收父组件传过来的数据
}


}
</script>

<style scoped>
 .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
</style>